<template>
  <el-dialog
    v-model="dialogVisible"
    title="宠物资料修改"
    width="60%"
    :with-credentials="true"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <el-form
        :model="form"
        :inline="true"
        label-width="120px"
        class="customClass"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="宠物名称" prop="petName">
          <el-input
            v-model="form.petName"
            placeholder="请输入宠物名称"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="挂失人电话" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="请输入联系电话"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="丢失的地址" prop="lossAddress">
          <el-input
            v-model="form.lossAddress"
            placeholder="请输入丢失的地址"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="宠物的描述" prop="remark">
          <el-input
            v-model="form.remark"
            placeholder="宠物的描述"
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item label="宠物挂失状态" prop="lossStatus">
          <el-radio-group v-model="form.lossStatus" style="width: 180px">
            <el-radio label="0">丢失中</el-radio>
            <el-radio label="1">已找回</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div style="width: 20%">
        <FileUpload
          label="上传宠物图片"
          v-model:uid="uidName.petData"
          v-model:file="fileList.petFile"
          :smartCheck="0"
          :uploadType="1"
          ref="petFileRef"
        />
        <div style="height: 20px"></div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(formRef)">
          确定
        </el-button>
        <el-button @click="resetForm(formRef)">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import FileUpload from "@/view/components/file-upload.vue";
import type { FormInstance, FormRules } from "element-plus";
import { uploadFile } from "@/api/file";
import { ElMessage } from "element-plus";
import { updatePetLossRecordInfo } from "@/api/owner";
const uidName = reactive<any>({
  petData: [],
});

const fileList = reactive<any>({
  petFile: "" as any,
});
interface RuleForm {
  petName: string;
  lossAddress: string;
  phone: string;
  remark: string;
  lossStatus: number | string;
  pictureUrl: string;
  deleted: number | string;
  id: string | number;
}
const formRef = ref<FormInstance>();
const form = reactive<RuleForm>({
  petName: "",
  phone: "",
  lossAddress: "",
  remark: "",
  lossStatus: "",
  pictureUrl: "",
  deleted: "",
  id: "",
});
// const vaccineImage = ref<any>();
const rules = reactive<FormRules<RuleForm>>({
  petName: [{ required: true, message: "请输入宠物的名字", trigger: "blur" }],
  phone: [
    {
      required: true,
      message: "请输入联系人电话",
      trigger: "blur",
    },
  ],
  lossStatus: [
    {
      required: true,
      message: "请选择宠物的找回状态",
      trigger: "change",
    },
  ],
  lossAddress: [
    {
      required: true,
      message: "请选择宠物的丢失位置",
      trigger: "blur",
    },
  ],
});
const dialogVisible = ref(false);

const showDialog = (data: RuleForm) => {
  form.id = data.id;
  form.petName = data.petName;
  form.lossStatus = data.lossStatus;
  form.lossAddress = data.lossAddress;
  form.phone = data.phone;
  form.remark = data.remark;
  form.pictureUrl = data.pictureUrl;
  dialogVisible.value = true;
};

const petFileRef = ref();
const emits = defineEmits(["getPetDataList"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      if (fileList.petFile) {
        await uploadFile(fileList.petFile, uidName.petData.uuidName, 1).then(
          () => {
            fileList.petFile = "";
            petFileRef.value.resetFile();
            form.pictureUrl = uidName.petData.pictureRealPath.slice(
              0,
              uidName.petData.pictureRealPath.length - 1
            );
          }
        );
      }
      await updatePetLossRecordInfo(form).then((res: any) => {
        ElMessage({
          message: res.message,
          type: "success",
        });
        fileList.petFile = "";
        emits("getPetDataList");
      });
      dialogVisible.value = false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  dialogVisible.value = false;
  formEl.resetFields();
};
defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.dialog-footer .el-button {
  margin-right: 10px;
  margin-top: -20px;
}

.customClass {
  .el-form-item {
    margin-bottom: 30px;
  }
  width: 80%;
}
</style>
